<!DOCTYPE html>
<html class="loading" lang="en" data-textdirection="ltr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <meta name="author" content="PIXINVENT">
    <title>999后台管理系统</title>
    <link rel="stylesheet" type="text/css" href="app-assets/css/vendors.css">
    <link rel="stylesheet" type="text/css" href="app-assets/css/vertical-menu.css">
    <link rel="stylesheet" type="text/css" href="app-assets/css/bootstrap-extended.css">
    <script src="app-assets/js/Dream.js"></script>
    <script src="app-assets/js/Http.js"></script>
</head>
<style>
    img{
        width: 100px;
    }
</style>
<body>
<div class="content-wrapper">
    <div class="content-header ">
        <div class="content-header-left mb-2">
            <h3 class="content-header-title mb-0">库存</h3>
        </div>
    </div>
    <div class="card">
        <div class="card-content">
            <div class="card-body">
                <div class="searchbox">
                    <div class="form-inline">
                        <div class="form-group">
                            <input type="text" class="form-control" id="productName" placeholder="商品名称">
                        </div>
                        <div class="form-group">
                            <button type="submit" class="btn btn-primary" onclick="selects()">查询</button>
                        </div>
                    </div>
                </div>

                <div class="tablebox1">
                    <table class="table">
                        <thead>
                        <tr>
                            <th>商品ID</th>
                            <th>商品图片</th>
                            <th>商品名称</th>
                            <th>商品数量</th>
                        </tr>
                        </thead>
                        <tbody id="showT">
                        <tr>

                        </tr>


                        </tbody>
                    </table>


                </div>
            </div>
        </div>
    </div>
</div>

<script src="app-assets/js/vendors.min.js" type="text/javascript"></script>
<script src="app-assets/js/app-menu.js" type="text/javascript"></script>
<script src="app-assets/js/app.js" type="text/javascript"></script>
<script src="app-assets/js/echarts.min.js" type="text/javascript"></script>
<script>
    $(document).ready(function () {
        $(".ewm").click(function () {
            $(this).toggleClass("active")
        });
        selectAll($('#productName').val())
    });

    function selectAll(productName) {
        $.ajax({
            'url': HTTP.getUserInfo + '/purchaseOrderDetails/getStock',
            'type': 'get',
            'dataType': 'json',
            'data': {productName},
            'success': selectAllSuccess
        })
    }

    function selects() {
        selectAll($('#productName').val())
    }

    function selectAllSuccess(data) {
        $('#showT tr').remove()

        data.data.forEach(dd => {
            $('#showT').append(`<tr>
                    <td>${dd.productId}</td>
                    <td><img src="`+HTTP.getUserInfo+`/${dd.imageUrl}"></td>
                    <td>${dd.productName}</td>
                    <td>${dd.quantity}</td>

                </tr>`)
        })

    }

</script>
</body>
</html>